<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板引擎</title>
    <script type="text/javascript" src="./template.js"></script>
    <script type="text/html" id="template">
        <h1>{{title}}</h1>
        {{if books}}
            {{each books as value i}}
                <div>{{value}}</div>
            {{/each}}
        {{/if}}
    </script>
    <script type="text/javascript">
    window.onload = function(){
        var data = {
            title : '图书信息',
            books:['三国演义','水浒传','西游记','红楼梦']
        };
        // template的作用就是把模板和数据拼接到一块生成一个静态HTML片段，实际就是该方法的返回值
        // 参数一：模板id
        // 参数二：用来渲染的数据
        var html = template('template',data);
        var con = document.getElementById('container');
        con.innerHTML = html;
    }
        
    </script>
</head>
<body>
    <div id="container"></div>
</body>
</html>